.container{
    margin:0 auto;
    width:600px;
    height:400px;
    position: relative;
    overflow: hidden;
    border:4px solid gray;
    box-shadow: 3px 3px 5px gray;
    border-radius:10px;
    }
    .list{
    width:4200px;
    height:400px;
    position: absolute;
    top:0px;
    }
    img{
    float:left;
    width:600px;
    height:400px;
    }
    .dots{
    position: absolute;
    left:40%;
    bottom:30px;
    list-style: none;
    }
    .dots li{
    float:left;
    width:8px;
    height:8px;
    border-radius: 50%;
    background: gray;
    margin-left:5px
    }
    .dots .active{
    background: white;
    }
    .pre,.next{
    position: absolute;
    top:40%;
    font-size:40px;
    color:white;
    text-align:center;
    background: rgba(128,128,128,0.5);
    /* display:none;*/
    }
    .pre{
    left:30px;
    }
    .next{
    right:30px;
    }